<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">按钮</button>
    <div>div</div>
    <script>
        /* 
            让button标签出现点击效果，那么就需要给button标签添加事件
        */
        /* 
             onclick:单击一次后触发后边的函数的执行
             ondblclick：短时间内连续点击两次后触发后边的函数的执行
 
        */
        /* 
            需求：给<button>标签添加单击事件。
            单击事件：是所有Js事件当中的一种。
         */
        // 第一步：获取button对象
        const btnObj1 = document.querySelector("#btn1");
        console.log(btnObj1);
        console.dir(btnObj1);//onclick 就是对象的单击事件，默认为空
        // 给onclick事件加上一个对应的函数，当单击这个元素时会触发该函数的执行
        btnObj1.onclick = function () {
            alert("你点击了按钮");
        }

        //这是一个什么事件呢？
        // 鼠标的双击事件，就是短时间内（1秒以内）连续点击2次这个元素就会触发。
        // btnObj1.ondblclick = function () {
        //     alert("你点击了按钮");
        // }
        const divObj = document.querySelector("div");
        console.log(divObj);
        console.dir(divObj);

        divObj.onclick = function () {
            //显示div里面的内容？
            alert(divObj.innerText);
        }
    </script>
</body>

</html>